<template>
  <el-container>
    <el-aside width="200px">
      <el-container>
        <el-header>
          <el-input placeholder="输入关键字进行过滤" clearable></el-input>
        </el-header>
        <el-main class="nopadding">
          <el-tree
            class="menu"
            node-key="id"
            :data="groupData"
            :current-node-key="''"
            :highlight-current="true"
            @node-click="queryUser"
          ></el-tree>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-aside>
    <el-container>
      <el-header>
        <div class="left-panel">
          <el-button
            type="primary"
            @click="add"
            icon="el-icon-plus"
          ></el-button>
        </div>
        <div class="right-panel">
          <div class="right-panel-search">
            <el-input placeholder="关键词" clearable></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="upsearch"
            ></el-button>
          </div>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable
          ref="table"
          :apiObj="userDeptApi.getAllUserListOfDeptId"
          row-key="id"
          stripe
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column
            label="姓名"
            prop="Name"
            width="150"
          ></el-table-column>
          <el-table-column
            label="登录名称"
            prop="LoginName"
            width="150"
          ></el-table-column>
          <el-table-column
            label="邮箱"
            prop="Email"
            width="250"
          ></el-table-column>
        </scTable>
      </el-main>
    </el-container>
  </el-container>
  <save-dialog
    v-if="data.dialog.save"
    ref="saveDialogRef"
    @success="handleSaveSuccess"
    @closed="data.dialog.save = false"
  ></save-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue';
import api from '@/api/dept/index';
import scTable from '@/components/scTable/index.vue';
import userDeptApi from '@/api/Framework/userDept/index';
import { ElMessageBox, ElMessage } from 'element-plus';
//引入模态框
import saveDialog from './components/save.vue';
let groupData = ref([]);
let saveDialogRef: any = ref('');
let table = ref('');
const data = reactive({
  dialog: { save: false },
  searchList: {},
  selection: [],
});
let queryUserListOfDeptIdDto = reactive({});
const getTrees = async () => {
  let res = await api.getDeptTrees.get();
  if (res.code == 0) {
    groupData.value = res.data;
  }
};
//切换到底是添加还是修改方法
const handleSaveSuccess = (data: any, mode: any) => {
  if (mode == 'add' || mode == 'edit') {
    (table as any).value.upData(data.searchList);
  }
};
const queryUser = async (data: any, node: any) => {
  let isHaveChildren = false;
  if (node.childNodes.length <= 0) {
    isHaveChildren = false;
  } else {
    isHaveChildren = true;
  }

  queryUserListOfDeptIdDto = {
    deptId: data.id,
    isHaveChildren: isHaveChildren,
  };
  (table.value as any).reload(queryUserListOfDeptIdDto);
};
//树过滤
const groupFilterNode = (value: any, data: any) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
//添加窗口的弹出方法
const add = () => {
  data.dialog.save = true;
  nextTick(() => {
    saveDialogRef.value.open();
  });
};
const selectionChange = (selection: any) => {
  data.selection = selection;
};
//批量删除
const batch_del = async () => {
  ElMessageBox.confirm(
    `确定删除选中的 ${data.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
    '提示',
    {
      type: 'warning',
    }
  ).then(async () => {
    const ids = data.selection.map((item: any) => item.Id);
    const res = await userDeptApi.active.post({
      ids: ids,
      isActive: 0,
    });
    if (res.code !== 0) {
      Promise.reject(res.message);
    }
    (table as any).value.upData(data.searchList);
    ElMessage.success('操作成功');
  });
};
//搜索
const upsearch = () => {
  // this.$refs.table.upData(this.search);
};
getTrees();
</script>
